<template>
    <popup ref="popupRef" :title="popupTitle" width="500px" @confirm="handleConfirm" :async="true" @close="popupClose">
        <div class="pr-8">
            <el-form ref="formRef" :model="formData" label-width="80px">
                <el-form-item label="协议预览" prop="">
                	<el-button type="primary" size="small" @click="handleSign">查看</el-button>
                </el-form-item>
                <el-form-item label="签署账号" prop="">
                	<span>{{props.value}}</span>
                </el-form-item>
                <el-form-item label="签署状态" prop="">未发起</el-form-item>
            </el-form>
        </div>
		<agreement-popup v-model:show="showAgreement" ref="agreementRef" @close="showAgreement = false" />
    </popup>
</template>
<script lang="ts" setup>
	import Popup from '@/components/popup/index.vue'
	import type { FormInstance, FormRules } from 'element-plus'
	import feedback from '@/utils/feedback'
	const formRef = shallowRef<FormInstance>()
	const props = defineProps({
		show: {
			type: Boolean,
			required: true
		},
		value: {
			type: [Number, String],
			required: true
		}
	})
	
	import AgreementPopup from './agreement.vue';
	const agreementRef = shallowRef<InstanceType<typeof AgreementPopup>>()
	const showAgreement = ref(false)
	const handleSign = async () => {
		showAgreement.value = true;
	}
	
	const emit = defineEmits<{
		(event: 'update:show', value: boolean): void
		(event: 'confirm', value: any): void
	}>()

	const popupTitle = computed(() => {
		return `协议签署`
	})

	const formData = reactive({
		// check_status: 0,
		// reason: '',
		// commission_rate: null
	})
	
	const popupRef = shallowRef<InstanceType<typeof Popup>>()

	const handleConfirm = async () => {
		await formRef.value?.validate()
		emit('confirm', {})
	}

	const popupClose = () => {
		emit('update:show', false)
		formRef.value?.resetFields()
	}

	watch(
		() => props.show,
		(val) => {
			if (val) {
				popupRef.value?.open()
			} else {
				popupRef.value?.close()
			}
		}
	)
</script>
